<template>
  <!-- 底部导航 -->
  <div class="nav">
    <ul>
      <router-link tag="li" active-class="active" to="/learn">
      <img src="https://image.hongbeibang.com/FhngZoiK_s7Zw4K3DxLogRfqoO06?50X50&imageView2/1/w/50/h/50" alt="">
      <p>学烘焙</p>
      </router-link>
       <router-link tag="li" active-class="active" to="/circle">
     <img src="https://image.hongbeibang.com/Flc4c0tB_BGGFnA-ORFowqfNOpaD?50X50&imageView2/1/w/50/h/50" alt="">
      <p>烘焙圈</p>
      </router-link> <router-link tag="li" active-class="active" to="/question">
     <img src="https://image.hongbeibang.com/Flm_lYHJQA56h0VyhdRhQ1i5iO06?50X50&imageView2/1/w/50/h/50" alt="">
      <p>问答</p>
      </router-link> <router-link tag="li" active-class="active" to="/center">
      <img src="https://image.hongbeibang.com/FrYeKj0MohOJQuNzUgCugg90cHCS?50X50&imageView2/1/w/50/h/50" alt="">
      <p>小窝</p>
      </router-link>
      
    </ul>
  </div>
</template>
 
<script>
import "@/assets/iconfont/iconfont.css"
export default {
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.nav {
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ccc;
    height: 55px;
    text-align: center;
    background: #fff;
    color: #7a7e83;
    width: 100%;
    z-index: 2;
    ul {
        padding: 0;
        display: flex;
        align-items: center;
        li {
            margin-top: 5px;
            flex: 1;
            height: 60px;
            &.active {
                color: #fe5100;
            }
            img {
              width: 25px;
              
              
              
            }
            p {
                margin-top: 2px;
            }
           
        }
    }
}

</style>
